<template>
  <div class="shopcar">
    <nav-bar class="shopcar-nav">
      <div slot="left">
        <div @click="bgoBack">
            <van-icon name="arrow-left" color='#fff'/>
        </div>
      </div>
      <div slot="center">
        易购优选
      </div>
    </nav-bar>
    <div ref="shopcarItem" class="shopcar-item">
      <div>
        <shopcar-item
          v-for="(item,index) in cartList"
          :key="index"
          :item-info="item"
        ></shopcar-item>
        <div class="shopcar-title" v-if="!cartList.length">
          <h4>你的购物车是空的</h4>
        </div>
      </div>
    </div>
    <check-button-bar></check-button-bar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BScroll from 'better-scroll'
import ShopcarItem from './childComps/ShopcarItem.vue'
import CheckButtonBar from './childComps/CheckButtonBar.vue'
import NavBar from '@/components/navbar/NavBar.vue'
export default {
  name: 'Shopcar',
  components: {
    ShopcarItem,
    CheckButtonBar,
    NavBar
  },
  mounted () {
    this.getBscoll()
  },
  computed: {
    ...mapGetters(['cartList'])
  },
  methods: {
    bgoBack () {
      this.$router.go(-1)
    },
    getBscoll () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.shopcarItem, {
          click: {
            type: Boolean,
            default: true
          }
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.shopcar{
  background: rgba(0, 0, 0, 0.25);
  .shopcar-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .shopcar-title{
    padding-top: 20vh;
    text-align: center;
  }
  .shopcar-item{
    position: absolute;
    top: 45px;
    right: 0;
    left: 0;
    bottom: 109px;
    overflow: hidden;
  }
}
</style>
